<template>
  <div class="carModelDetailMain h100">
    <full-parent-dom-with-dask :loading="!activeVehicleId"></full-parent-dom-with-dask>
    <div class="carModelDetailMainTop">
      <a-row type="flex">
        <a-col flex="74px" class="carIconCol">
          <svg class="icon carIcon" aria-hidden="true">
            <use xlink:href="#icon-qiche-zhenshi" v-if="activeVehicleData.vehicleType == 1"></use>
            <use xlink:href="#icon-qiche-test" v-else></use></svg>
        </a-col>
        <a-col flex="auto" class="carModelDetailMainTopDesc">
          <h5>
            {{ activeVehicleData.vin }}
            <lock-risk-jump
              style="margin-left:16px"
              :config="{
                lockFlag:activeVehicleData.lockFlag,
                compatibleRisk:0,
                taskJump:0,
                query:{taskId: '',vehicleId:activeVehicleId }
              }">
            </lock-risk-jump>
          </h5>
          <p class="carModelDetailMainTopDescItems">
            <span>
              {{ openType==='formal'? $t('vehicleVersion') : $t('smartDrivingDomainVersion') }}：{{ activeVehicleData.vehicleVersion || '-' }}
            </span>
            <span>
              {{ $t('最近升级成功时间') }}：{{ $commonFun.getDateTimeStr(activeVehicleData.lastUpgradeSuccessTime) }}
            </span>
            <span>
              {{ $t('最近联网时间') }}：{{ $commonFun.getDateTimeStr(activeVehicleData.lastActiveTime) }}
            </span>
            <span>
              {{ $t('activityLevel') }}：
              {{ $commonFun.getActivityDay(activeVehicleData.lastActiveTime, $t('activity')).cont || '-' }}
            </span>
          </p>
        </a-col>
      </a-row>
    </div>
    <div class="carModelDetailMainBottom">
      <a-tabs @change="changeTab" class="tabCommon" :active-key="activeKey">
        <!-- 车辆ECU -->
        <a-tab-pane key="vehiclePart" :tab="$t('vehicleInfor')">
          <div class="tablePageWarp"><car-model-detail-part
            :vehicle-id="vehicleId"
            :activeKey="activeKey"
            :openType="openType">
          </car-model-detail-part></div>
        </a-tab-pane>
        <!-- 车辆历史版本 -->
        <a-tab-pane key="HistoricalVersion" tab="车辆历史版本">
          <car-model-historical-version :activeKey="activeKey" :vin="vin" :openType="openType"></car-model-historical-version>
        </a-tab-pane>
        <!-- FOTA历史 -->
        <a-tab-pane key="FotaHistoryList" tab="FOTA历史">
          <!-- <fota-history-list :activeKey="activeKey" :vin="vin" :openType="openType" :vehicleId="vehicleId"></fota-history-list> -->
          <!-- 先用car-model-detail-version组件替换fota-history-list组件 -->
          <div class="tablePageWarp">
            <car-model-detail-version
              :activeKey="activeKey"
              :vehicle-id="vehicleId">
            </car-model-detail-version>
          </div>
        </a-tab-pane>
        <!-- 诊断历史 -->
        <!-- <a-tab-pane key="3" tab="诊断历史">
        </a-tab-pane> -->
        <!-- 智驾激活历史 -->
        <!-- <a-tab-pane key="4" tab="智驾激活历史">
        </a-tab-pane> -->
      </a-tabs>
    </div>
  </div>
</template>
<script>
import CarModelDetailPart from '@/views/vehicle/components/CarModelDetailPart'
import CarModelHistoricalVersion from '@/views/vehicle/components/CarModelHistoricalVersion.vue'
import FotaHistoryList from '@/views/vehicle/components/FotaHistoryList.vue'
import LockRiskJump from '@/views/components/CustomTag/lockRiskJump.vue'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { mapState, mapGetters } from 'vuex'
import CarModelDetailVersion from './CarModelDetailVersion'

const initTabKey = 'vehiclePart'
export default {
  components: {
    CarModelDetailPart,
    CarModelHistoricalVersion,
    FotaHistoryList,
    LockRiskJump,
    FullParentDomWithDask,
    CarModelDetailVersion
  },
  props: {
    vehicleId: {
      type: String,
      default: ''
    },
    vin: {
      type: String,
      default: ''
    },
    openType: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      activeVehicleData: (state) => state.vehicle.vehicleDetail
    }),
    ...mapGetters(['getBrandObj']),
    activeVehicleId () {
      if (!this.activeVehicleData) {
        return ''
      }
      return this.activeVehicleData.id
    }
  },
  data () {
    return {
      activeKey: initTabKey
    }
  },
  created () {
  },
  methods: {
    showActiveEcuUpdateInfo (ecuId) {
      this.$store.commit('resetVehicleEcuUpdateQuery')
      this.updateQueryParams.ecuIds = [ecuId]
    },
    changeTab (key) {
      this.activeKey = key
    }
  }
}
</script>
<style scoped lang="less">
.carModelDetailMain {
  display: flex;
  flex-direction: column;
  .carModelDetailMainTop {
    margin-bottom: 20px;
    flex: none;
    >.ant-row-flex {
      align-items: center;
    }
    .carIconCol {
      margin-right: 20px;
    }
    .carIcon {
      font-size: 74px;
    }
    .carModelDetailMainTopDesc {
      >h5 {
        font-size:18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
      }
      >p{
        font-size: 1em;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
<style lang="less">
.carModelDetailMainBottom {
  flex: 1 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  > .ant-tabs {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    .ant-tabs-content {
      flex: 1 0 0;
    }
  }
   .tabCommon {
    .ant-tabs-bar {
      .ant-tabs-nav {
        .ant-tabs-tab {
          padding: 0 0 6px 0;
        }
      }
    }
  }
  .tablePageWarp {
    padding:0;
  }
}
</style>
